import { FC } from 'react';
import { YHPopconfirm } from '@yh/yh-design';
import { Wrapper, Text } from './styled';

interface BtnConfig {
  [key: string]: {
    title: string;
    action?: (data?: any) => void;
    popconfirm?: {
      title?: string;
      onConfirm?: (data?: any) => void;
    };
  };
}

interface StatusConfig {
  [key: string]: Array<string>;
}

// const btnConfigDemo = {
//   pause: {
//     title: '暂停',
//     action: () => {},
//   },
//   log: {
//     title: '操作记录',
//     action: () => {},
//   },
// };

// const statusBtnMapDemo = {
//   a: ['pause', 'log'],
//   b: ['pause'],
// };

const noop = () => {};

const generateTableAction = (
  btnConfig: BtnConfig,
  statusConfig: StatusConfig
) => {
  if (!btnConfig || !statusConfig) return () => null;
  const Tableaction: FC<{ status: string | number; data?: any }> = ({
    status,
    data,
  }) => {
    const btnNameArr = statusConfig[status];
    if (!btnNameArr) {
      console.warn('Component:Tableaction something wrong here');
      return null;
    }
    return (
      <Wrapper>
        {btnNameArr.map((btnKey: string, index: number) => {
          const { title, action = noop, popconfirm = {} } = btnConfig[btnKey];
          const { onConfirm = noop, title: popTitle } = popconfirm;
          return (
            // @ts-ignore
            <YHPopconfirm
              disabled={!popTitle}
              {...popconfirm}
              onConfirm={onConfirm.bind(null, data)}
              key={title}
            >
              <Text
                key={btnKey}
                onClick={popTitle ? noop : action.bind(null, data)}
                // @ts-ignore
                isLast={btnNameArr.length - 1 === index}
              >
                {title}
              </Text>
            </YHPopconfirm>
          );
        })}
      </Wrapper>
    );
  };
  return Tableaction;
};

export default generateTableAction;
